import React, { useEffect, useState } from 'react';
import './payvip.scss'
import { Select, Input, Table, Button, Switch } from 'antd';
import * as service from '../../../../api/tzp'
import type { ColumnsType } from 'antd/es/table';
import { useNavigate } from 'react-router-dom';

interface DataType {
    key: string;
    id: number, 
    vipname: string,
    duration:string,
    current:number,
    privilege:string,
    flag:number,
    lasttime:string
}
function Payvip(props:any) {
    //   请求用户列表
  var [tableData,setTableData] = useState<DataType[]>([])
  var user = async ()=>{
    var res = await service.pay_list()
    console.log(res);
    setTableData(res.data)
  }
  useEffect(()=>{
    user()
  },[])
  
   //表格列表的配置
const columns: ColumnsType<DataType> = [
    
    {
        title: '会员卡名称', 
        dataIndex: 'vipname', 
        key: 'vipname',
        align: 'center',
        width:170,
        render: ( _ ,record) => <div className='user' style={{color:'orange'}}>{record.vipname}</div>,
    },
    {
        title: '有效时长', 
        key: 'duration',
        align: 'center',

        render: ( _ ,record) => <div >{record.duration}</div>,
    },
    {
        title: '价格（元）', 
        key: 'current',
        align: 'center',

        render: ( _ ,record) => <div >{record.current}</div>,
    },
    {
        title: '划线价（元）', 
        key: 'current',
        align: 'center',

        render: ( _ ,record) => <div >{(record.current*1)+200}</div>,
    },
    {
        title: '特权描述', 
        key: 'privilege',
        align: 'center',

        render: ( _ ,record) => <div >{record.privilege}</div>,
    },
    {
        title: '类型状态', 
        dataIndex: 'flag',
        key: 'flag',
        align: 'center',
        render: (text, record) => <Switch defaultChecked={text} />

    },
    {
        title: '最后修改时间', 
        key: 'lasttime',
        align: 'center',
        render: ( _ ,record) => <div >{record.lasttime}</div>,
    },
    {
        title: '操作',
        key: 'tip',
        align: 'center',
        render: ( _ ,record ) => {
            return <>
                <Button  style={{color:'blue'}} >编辑</Button>
                <Button  style={{color:'blue'}} onClick={()=>{del(record.id)}}>删除</Button>
            </>
        },
    },
]
    var navigate = useNavigate()
    var Addgratis = ()=>{
        navigate('/index/addpay')

    }
    var del =async (id:any)=>{
        var res1 = await service.delete_paylist({id:id})
        console.log(res1);
        var res = await service.pay_list()
        console.log(res);
        setTableData(res.data)
    }
    return (
        <div className='payvip'>
            <div className='title-box'>
                <div className='title-top'>用户管理 / 付费会员卡管理</div>
                <div className='title-bottom'>付费会员卡管理</div>
            </div>
            <div className="payvip-list">
                <div className='list_box'>
                    <div className='list-left'><div className="list-title">用户列表</div></div>
                    <div className='list-right'>
                        <button onClick={()=>{Addgratis()}}>新建</button>
                        <button>全部删除</button>
                    </div>
                </div>
                <Table columns={columns} dataSource={tableData} style={{marginTop:20}} rowKey="id"/>

            </div>
        </div>
    );
}

export default Payvip;